<template>
	<view class="list " @click="itemClick" :id="elId">
		<!-- 商品图 -->
		<view class="imageBox ">
			<image class="img " :src="sheep.$url.cdn(data.thumb?.split(',')[0]||'')" mode="aspectFill" />
			<view class="imageBox-type ss-flex">
				<!-- 团购标签 -->
				<view class="imageBox-type-tg ss-p-x-12 ss-p-y-6">
					团购
				</view>
				<!-- 定位 -->
				<view class="imageBox-type-dis ss-p-x-12 ss-p-y-6" v-if=" data.distance && data.distance.raw_m">
					{{data.distance.format_distance }}
				</view>
			</view>
		</view>
		<!-- 店铺信息 -->
		<view class="list-bottom">
			<view class="list-bottom-title ss-line-1">{{data.name}}</view>
			<view class="list-bottom-address ss-line-1" v-if="data.address">{{data.address}}</view>
			<view class="list-bottom-rate ss-flex">
				<uni-rate allow-half :value="data.mark" size="16" active-color="#00D7B9"/>
				<view class="list-bottom-rate-num">{{data.mark||0}}分</view>
			</view>
			<view class="list-bottom-tags ss-flex" v-if="data.category_tag">
				<view class="ss-line-1">
					<text class="tags-item" v-for="(item,i) in data.category_tag.split(',')" :key="item+i">
						{{ item }}&nbsp;</text>
				</view>
			</view>
			<!-- 团购信息 -->
			<view class="list-group" v-if="data.indexGoods.length>0">
				<view class="list-group-item ss-flex-row" v-for="item in data.indexGoods" :key="item.key">
					<view class="item-discount">
						惠
					</view>
					<view class="item-info">
						<view class="item-info-title ss-line-1">{{item.title}}</view>
						<view class="ss-flex">
							<view class="item-info-price">¥{{removeTrailingZeros(item.price[0])}}</view>
							<view class="item-info-original_price" v-if="item.original_price">¥{{item.original_price}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		reactive,
		getCurrentInstance,
		ref,
		nextTick,
		computed
	} from 'vue';

	import sheep from '@/sheep';

	import _ from 'lodash';

	const props = defineProps({
		data: {
			type: Object,
			default: {},
		}
	})
	const emits = defineEmits(["itemClick","getHeight"])


	//实心星星数量
	const bolidStar = computed(() => {

		return parseInt(props.data.mark);

	})
	//计算空心
	const emptyStar = computed(() => {

		if (Math.ceil(props.data.mark) == 5) {

			if (parseFloat(props.data.mark) < 5) {
				return 1;
			} else if (parseFloat(props.data.mark) == 5) {
				return 0;
			}
		} else {
			return 1;
		}
	})



	const removeTrailingZeros = (str) => {
		return Number(String(parseFloat(str).toFixed(20)).replace(/\.?0*$/, ''));
	}


	const itemClick = () => {
		emits("itemClick", {
			id: props.data.id
		});
	}
	// 获取卡片实时高度
	const {
		proxy
	} = getCurrentInstance();
	
	const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`;
	
	function getGoodsPriceCardWH() {
		const view = uni.createSelectorQuery().in(proxy);
		view.select(`#${elId}`).fields({
			size: true,
			scrollOffset: true
		});
		view.exec((data) => {
			let totalHeight = 0;
			const goodsPriceCard = data[0];
			totalHeight = goodsPriceCard.width + goodsPriceCard.height;
			emits('getHeight', totalHeight);
		});
	}
	onMounted(() => {
		nextTick(() => {
			getGoodsPriceCardWH();
		});
	});
</script>

<style lang="scss" scoped>

	.list {
		width: 354rpx;
		font-family: Source Han Sans;
		overflow: hidden;
		margin-left: 14rpx;
		margin-bottom: 14rpx;
		.imageBox{
			position: relative;
			.img {
				width: 354rpx;
				height: 354rpx;
				min-width: 354rpx;
				border-radius: 10rpx;
				vertical-align: bottom;
			}
			.imageBox-type{
				position: absolute;
				bottom: 0;
				left: 0;
				color: #fff;
				font-size: 24rpx;
				border-radius: 8rpx;
				overflow: hidden;
				.imageBox-type-tg{
					background-color: #FB5707;
				}
				.imageBox-type-dis{
					background-color: rgba( 0,0,0,0.30);
					color:#fff;
				}
			}
		}
		.list-bottom{
			padding: 14rpx 18rpx;
			background-color: #F9F9F9;
			box-sizing: border-box;
			.list-bottom-title{
				width: 100%;
				font-size: 32rpx;
				font-weight: 600;
				color: #3D3D3D;
			}
			.list-bottom-address{
				margin-top: 10rpx;
				height: 30rpx;
				font-size: 24rpx;
				color: #95989e;
			}
			.list-bottom-rate{
				margin-top: 10rpx;
				.list-bottom-rate-num{
					font-size: 28rpx;
					color: #95989e;
					margin-left: 10rpx;
				}
			}
			.list-bottom-tags{
				width: 100%;
				.tags-item{
					font-size: 24rpx;
					color: #95989e;
				}
			}
		}
		.list-group{
			.list-group-item{
				margin-top: 14rpx;
				align-items: flex-start;
				.item-discount{
					background-color: rgba( 12,188,186,0.14);
					color:#0CBCBA;
					font-size: 26rpx;
					line-height: 1;
					padding: 6rpx 6rpx;
					border-radius: 4rpx;
					margin-right: 13rpx;
					vertical-align:middle;
				}
				.item-info{
					.item-info-title{
						font-size: 26rpx;
						font-weight: normal;
						color: #333;
					}
					.item-info-price{
						color: #E82D2D;
					}
					.item-info-original_price{
						margin-left: 10rpx;
						white-space: nowrap;
						color: #888;
						font-size: 26rpx;
						font-weight: 200;
						text-decoration: line-through; /* 添加删除线 */
					}
				}
			}
		}
	}

</style>